/* 
 1、输入账号时，清空账号框
 2、选择商品时，自动显示价格
 3、输入数量时，自动显示总价
 4、点击确认时，用弹框，显示总价
  给标签添加适合的类名---方便js获取标签
 */
	
// 获取标签
var account = document.querySelector(".account")
var goods = document.querySelector(".goods")
var price = document.querySelector(".price")
var num = document.querySelector(".num")
var total = document.querySelector(".total")
var btn = document.querySelector(".btn")

// 重新输入账号时，清空账号框：当账号框获取到焦点，我们认为用户要重新输入账号
account.onfocus = function(){
	// 表单的内容设置为空字符串，就是清空
	account.value = ""
}

// 选择商品
// select 下拉菜单 选择时触发的事件是 onchange
goods.onchange = function(){
	//获取 选择的选项的值
	var good = goods.value 
	//判断选项是哪一个，根据不同的选择 设置不同的单价
	if(good=="请选择"){
		price.value = "0.00"
	}else if(good=="矿泉水"){
		price.value = "2.00"
	}else if(good=="冰棒"){
		price.value = "3.00"
	}else{
		price.value = "5.00"
	}
	
	// 重新选商品后 将 数量 和总价 清空
	num.value = "0"
	total.value =  "0.00"
}

// 输入数量 自动计算总价
num.onfocus = function(){
	num.value = ""
}
// onchange ： 内容发生改变 + 失去焦点
// oninput ： 内容发生改变
// js 获取的页面数据，都是字符串形式
// 字符串进行乘法运算 --- 有隐式转换 --  结果一定是数字
// 咱这个代码，太简单了。相信用户是善良的
num.oninput = function(){
	// 获取现在单价  获取数量   乘法
	var dj = price.value // "2.00"
	var sl = num.value   //"1"
	// 计算总价
	var zj = dj * sl  // 2*1  === 2
	
	// 把总价设置到对应的标签中
	total.value = zj.toFixed(2)  //将数字转换为有两个小数的字符串
}

// 点击按钮 使用弹框显示信息
btn.onclick = function(){
	// 获取用户和总价
	var yh = account.value
	var zj = total.value
	// 判断 并提示
	if(yh==""){
		alert("请输入用户")
	}else if(zj=="0.00"){
		alert("请完成够买流程")
	}else{
		alert(`${yh}购买了${zj}￥的商品`)
	}
	// 输出
	// alert(yh+ "购买了"+zj+"￥的商品")
	
}
